<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fruits[0]}}
			{{fruits[1]}}
			{{fruits[2]}}
			<br>
			<h1 v-for='(item,index) in fruits'>
			{{index+1}}:{{item}}
			</h1>
			{{goods.title}}
			<h1 v-for='(value,key) in goods'>
				{{key}}:{{value}}
			</h1>
			数字迭代，从1开始
			<h1 v-for="i in 10">
				{{i}}
			</h1>
			1-100之间的偶数
			<template v-for="i in 100">
				<h1 v-if="i%2==0">
					{{i}}
				</h1>
			</template>
			<ul>
				<li v-for='(item,index) in shopCar'>
					标题:{{item.title}}<br>
					价格:{{index.price}}
				</li>
			</ul>
			<table border>
				<tr v-for="(row,r) in table" :key="r">
					<td v-for="(col,c) in row" :key='r+"-"+c'>{{col}}</td>
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						fruits:["苹果","香蕉","梨",1,false],
						veg:['土豆','生菜','番茄'],
						goods:{
							title:"华为手机",
							price:1999
						},
						shopCar:[{
							title:'小米手机',
							price:1599
						},
						{
							tltle:'羽绒服',
							price:599
						}],
						table:[
							[1,2,5,4,6],
							[1,2,5,4,6],
							[1,2,5,4,6],
							[1,2,5,4,6],
							[1,2,5,4,6],
						]
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>